<template>
  <div class="chartPart"></div>
</template>

<script>
import myEcharts from '@/utils/echarts/echarts-util.js'
import mixinsData from './mixins_data'
export default {
  props: {
    isReverse: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 二级标题
    subText: {
      type: String,
      default: ''
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: false
    },
    // 是否显示图例
    showLegend: {
      type: Boolean,
      default: false
    },
    // x轴数据
    xData: {
      type: Array,
      required: true
    },
    // 显示的图表数据
    chartData: {
      type: Array,
      required: true
    },
    // 柱状图的颜色
    barColor: {
      type: Array,
      default: () => []
    },
    // 扩展参数
    otherOptions: {
      type: Object,
      default: () => {}
    },
    // 统一样式
    commonStyle: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixinsData],
  data () {
    return {
      chart: null,
      seriesData: []
    }
  },
  mounted () {
  },
  methods: {
    initChart () {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      this.chart.off()
      this.setOptions()
      let that = this
      this.chart.on('click', function (val) {
        // 相应外部点击事件
        that.$emit('handleClick', val)
      })
      window.addEventListener('resize', function () {
        that.chart.resize()
      })
    },
    setOptions () {
      this.chart.showLoading()
      const datas = myEcharts.EchartsDataFormate.groupFormatter(this.chartData, 'bar')
      // this.seriesData = datas.data ? datas.data : []
      this.chart.hideLoading()
      // 统一样式
      if (JSON.stringify(this.commonStyle) !== '{}') {
        for (let item in datas.data) {
          datas.data[item] = Object.assign(datas.data[item], this.commonStyle)
        }
      }
      const option = {
        color: this.barColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          data: this.xData,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        animationThreshold: 4000,
        animationDuration: 4000,
        // animationEasing: '',
        series: datas.data
      }
      // console.log(datas.data)
      if (this.showTitle) {
        option.title = {
          text: this.title,
          subtext: this.subText,
          x: 'center'
        }
        option.grid.top = '17%'
      }
      if (this.showLegend) {
        option.legend = {
          align: 'left',
          top: this.showTitle ? 'bottom' : 'top',
          right: 10,
          data: datas.group
        }
        if (this.showTitle) {
          option.grid.bottom = '15%'
        }
      }
      // 扩展属性
      if (JSON.stringify(this.otherOptions) !== '{}') {
        for (let item in option) {
          for (let item2 in this.otherOptions) {
            if (item === item2) {
              option[item] = Object.assign(option[item], this.otherOptions[item2])
            }
          }
        }
      }
      this.chart.setOption(option, true)
    },
    // 动态播放
    playItem (time = 2000) {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      this.seriesData = myEcharts.EchartsDataFormate.groupFormatter(this.chartData, 'bar')
      // 实现自动播放tooltip的方法
      var app = {
        currentIndex: -1
      }
      let that = this
      let timer = setInterval(function () {
        var dataLen = that.seriesData.data[0].data.length
        // var dataLen = 5
        // 取消之前高亮的图形
        that.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        app.currentIndex = (app.currentIndex + 1) % dataLen
        // 高亮当前图形
        that.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
        // 显示 tooltip
        that.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        })
      }, time)
      localStorage.setItem('timer', timer)
      return timer
    }
  }
}
</script>
